<!--
 * @Author: your name
 * @Date: 2022-04-18 22:13:47
 * @LastEditTime: 2022-04-19 12:38:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\apply\chooseTag.vue
-->
<template>
  <div class="choose-content">
    <div class="bb"></div>
    <Search
      ref="topSearch"
      class="search2"
      placeholder="商品名称|商品编号"
      :isAdd="false"
      :isScreen="false"
      :isType="true"
      @onSearch="onSearch"
    ></Search>

    <pageList
      ref="pageList"
      :checkedShow="checkedShow"
      :columns="columns"
      :listUrl="listUrl"
      @getCheckedValue="getCheckedValue"
      @handleList="handleList"
    >
      <div class="rt-column" slot="body" slot-scope="{ item }">
        <div class="rt-row">
          <div class="column">
            <span class="column-t">订购数量</span>
            <span class="column-c">5000箱</span>
          </div>
          <div class="column">
            <span class="column-t">订购基本数量</span>
            <span class="column-c" style="color: #ff4d4f">5000片</span>
          </div>
        </div>
        <div class="rt-row">
          <div class="column">
            <span class="column-t">已申请发货数量</span>
            <span class="column-c">50箱</span>
          </div>
          <div class="column">
            <span class="column-t">本次申请发货数量</span>
            <span class="column-c" style="color: #ff4d4f">3000箱</span>
          </div>
        </div>
      </div>
    </pageList>

    <!-- <div class="search-bottom">
      <span class="btncancel" @click="cancel">重置</span>
      <span class="btnconfirm" @click="confirm">确定</span>
    </div> -->
  </div>
</template>

<script>
const formP = {
  status: 0,
  chargeUserId: "", //生产负责人ID
  craftName: "",
  contractCode: "",
  createdBy: "",
  promiseDateBegin: "",
  promiseDateEnd: "",
  createdTimeBegin: "",
  createdTimeEnd: "",
};
import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import moment from "moment";
import Search from "@/components/search";
import pageList from "@/components/pageList";
export default {
  props: {
    //父子组件需要传递的值
    contractId: {
      type: String,
      default: "",
    },
  },
  name: "search",
  components: { Navbar, ContactPickers, upload, Search, pageList },
  data() {
    return {
      checkedShow: false,
      listUrl:
        "/salemgt/erpShippingApply/findShippingItem?contractId=" +
        this.contractId, //列表接口
      columns: {
        titleKey: "code", //标题
        // subtitleKey: "description",//副标题
        content: [
          //内容
          {
            name: "承交日期",
            key: ["promiseDate"],
            style: "color:red",
          },
          {
            name: "生产物品",
            key: ["goodsName", "goodsCode"],
            keySymbol: "|", //间隔符号,
            // style:"color:red"
          },
        ],
        labelKey: ["planProductNum", "chargeUserIdText"], //标签
        labelText: {
          planProductNum: "计划产出：",
          chargeUserIdText: "生产负责人：",
        }, //标签
        // operation: [
        //   //操作
        //   {
        //     name: "手动排产",
        //     icon: require("../../assets/qd.png"),
        //     remarks:
        //       "说明是的撒的撒打算大撒的多撒点打算大撒多撒打算打算打算的的撒打算大撒",
        //   },
        // ],
      },
    };
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    //列表点击事件
    onSearch() {},
    handleList(id, item, type) {
      this.$emit("chooseTag", item);
      // console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
    },
    // 加载列表
    getList() {
      console.log("pppppppppppppppp");
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    cancel() {
      this.fzrName = "";
      this.createdByName = "";
      this.params = Object.assign({}, formP);
      this.$emit("chooseTag");

      // this.$router.push({ path: '/approval', query: {approveType:1,taskId:"4555"} })
    },
    confirm() {
      // this.$router.push({ path: "/carRoomList" });
      this.$emit("getCategory", this.params);
    },
  },
};
</script>
<style lang="scss" scoped>
.choose-content {
  //  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.6rem;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #fff;
  z-index: 99;
  .bb {
    height: 0.3rem;
  }
  .search2 {
    width: 100%;
    position: fixed;
    top: 0.4rem;
    z-index: 10;
  }
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
  .rt-column {
    padding: 0.17rem;
  }
  .rt-row {
    display: flex;
    justify-content: space-between;

    margin-bottom: 0.23rem;
    .column {
      //    border: 1px solid red;
      width: 1.5rem;
      .column-t {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        display: block;
        width: 100%;
        margin-bottom: 0.03rem;
      }
      .column-c {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191f25;
        display: block;
        width: 100%;
      }
    }
  }
}
</style>